<template>
    <div class="container">
        
        <div class="allTrees">
            <div class="boxContent">
                <Title :title="'OverView'"/>
                <div class="content" :style="{'height':'calc(100% - '+height+'px)'}" >
                    <div style="width:100%;height:20%">
                        <div class="parameterName">Number:</div>
                        <el-slider v-model="personCount" :show-tooltip="false" class="sliderStyle" 
                        :max='200' :min='0' :step="1" show-input :show-input-controls="false" :input-size="'mini'" :key="0"
                        @change="filtCount"></el-slider>
                    </div>
                    <div style="width:100%;height:80%">
                        <ScatterPlot :trees="getFiltCountTrees"/>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="modelBox">
            <div class="boxContent">
                <Title :title="'DrawPanel'"/>
            
            <div class="content" :style="{'height':'calc(100% - '+height+'px)'}" >
                <div class="btnBox" :style="{'height':'calc(15% - 10px)'}">
                    <!-- <input type="button" value="Graph2vec" class="btnGroup" @click="searchClick">
                    <input type="button" value="TreeEdit" class="btnGroup" @click="searchClickByTreeEdit">
                    <input type="button" value="Redo" class="btnGroup ReDo" @click="redrawClick" >
                    <input type="button" value="Undo" class="btnGroup" @click="undoClick"> -->
                    <input type="button" value="" class="btnGroup Node" title="draw node">
                    <input type="button" value="" class="btnGroup Line" title="draw line">
                    <input type="button" value="" class="btnGroup UnDo" title="Undo" @click="undoClick">
                    <input type="button" value="" class="btnGroup ReDo" title="Redo" @click="redrawClick" >
                    <input type="button" value="" class="btnGroup Search" title="Search" @click="searchClick">
                </div>
                <div :style="{'width':'100%','height':'60%'}">
                    <DrawPanel ref="DrawPanel"/>
                </div>
                <div class="allModels" :style="{'width':'100%','height':'25%','boxSing':'borderBox','border-top':'1px solid #ccc',
                'overflowX':'scroll','overflowY':'hidden'}">
                    <ul :style="{'width':100*modelData.length+'px','height':'100%'}">
                        <li class="model" v-for="(value,index) in modelData" :key="index" @click="ModelTreeClick(value)" style="width:100px">
                            <ModelTree :index="index" :tree="value" />
                        </li>
                    </ul>
                </div>
            </div>
            </div>
            
        </div>

        

        <div class="Info">
            <div class="boxContent">
                <Title :title="'Control View'"/>
                <div class="content" :style="{'height':'calc(100% - '+height+'px)'}" >
                    <div class="sliderBox">
                        <div class="parameterName">TrainEpochs:</div>
                        <el-slider v-model="trainEpochs" :show-tooltip="false" class="sliderStyle" 
                        :max='1000' :min='20' :step="10" show-input :show-input-controls="false" :input-size="'mini'" :key="1"></el-slider>
                    </div>
                    <div class="sliderBox">
                        <div class="parameterName">VectorSize:</div>
                        <el-slider v-model="vectorSize" :show-tooltip="false" class="sliderStyle" 
                        :max='300' :min='20' :step="1" show-input :show-input-controls="false" :input-size="'mini'" :key="2"></el-slider>
                    </div>
                    <div class="sliderBox">
                        <div class="parameterName">InferEpochs:</div>
                        <el-slider v-model="inferEpochs" :show-tooltip="false" class="sliderStyle" 
                        :max='500' :min='20' :step="10" show-input :show-input-controls="false" :input-size="'mini'" :key="3"></el-slider>
                    </div>
                    
                    <!-- <input type="button" value="TrainGraph2vec" class="btns"> -->

                </div>
            </div>
            <!-- <P>Familytrees Count:{{getLocation.length}}</p> -->
            <!-- <div class="filterBox">
                <p>代数:</p>
                <input type="txt" value="" ref="filterGeneration">
                <p>人数:</p>
                <input type="txt" value="" ref="filterCount"><br/>
                <input type="button" value="筛选" class="filterBtn" @click="filt">
                <input type="button" value="位置" class="translateBtn" @click="become">
            </div> -->

            <!-- <input type="button" value="位置" class="translateBtn" @click="become"> -->

        </div>

    </div>
</template>

<script>
import {mapGetters,mapActions} from "vuex";
import DrawPanel from '../components/DrawPanel'
import Title from '../components/Title'
import ScatterPlot from '../components/ScatterPlot'
import ModelTree from '../components/ModelTree'
import modelData from '../assets/modelData'
export default {
    name:'ControlPanel',
    components:{
        DrawPanel,
        Title,
        ScatterPlot,
        ModelTree,
    },
    data(){
        return {
            height:this.$store.state.titleHeight,
            modelData:modelData,
            trainEpochs:200,
            vectorSize:128,
            inferEpochs:100,
            personCount:this.getPersonCount,
            isFirst:true,
        }
    },
    computed:mapGetters(["getTreeId","getTrees","getTree","getPersonCount",'getFiltCountTrees']),
    methods:{
        ...mapActions(["fetchTree","updateFilters","updateChoosedTrees","updateTriFlag","updateFiltCountTrees"]),
        filt(){
            // this.updateFilters(Number(this.$refs.filterGeneration.value),Number(this.$refs.filterCount.value));
            var choosedTrees=[]
            if(this.$refs.filterCount.value==""){
                for(var i=0;i<this.getTrees.length;i++){
                    if(this.getTrees[i].deepth==Number(this.$refs.filterGeneration.value))
                    {
                        choosedTrees.push(this.getTrees[i].name);
                    }
                }
            }
            else if(this.$refs.filterCount.value!=""&&this.$refs.filterGeneration.value!=""){
                for(var i=0;i<this.getTrees.length;i++){
                    if(this.getTrees[i].deepth==Number(this.$refs.filterGeneration.value)&&
                    this.getTrees[i].count==Number(this.$refs.filterCount.value))
                    {
                        choosedTrees.push(this.getTrees[i].name);
                    }
                }
            }
            else{
                for(var i=0;i<this.getTrees.length;i++){
                    if(this.getTrees[i].count==Number(this.$refs.filterCount.value))
                    {
                        choosedTrees.push(this.getTrees[i].name);
                    }
                }
            }
            
            this.updateChoosedTrees(choosedTrees);
        },
        filtCount(){
            this.updateFiltCountTrees(this.personCount);
        },
    
        become(){
            this.updateTriFlag(true);
        },
        updateTree(name){
            this.fetchTree(name);
            this.updateTriFlag(false);
        },
        searchClick(){
            this.$refs.DrawPanel.search();
        },
        pipeiClick(){
            this.$refs.DrawPanel.pipei();
        },
        redrawClick(){
            this.$refs.DrawPanel.redraw();
        },
        undoClick(){
            this.$refs.DrawPanel.undo();
        },
        searchClickByTreeEdit(){
            this.$refs.DrawPanel.searchByTreeAndVector();
        },
        ModelTreeClick(tree,treeId){//选择模板树
            if(!treeId){
                treeId=-1;
            }
            this.$refs.DrawPanel.redraw();
            this.$refs.DrawPanel.drawTree(tree,treeId);
            let links=this.getLinks(tree,[]);
            let nodes=this.getNodes(tree,[]);
            let becomeData=this.becomeId(nodes,links);

            this.$refs.DrawPanel.linkList=becomeData.links
            this.$refs.DrawPanel.nodeList=becomeData.nodes;
            this.$refs.DrawPanel.index=nodes[nodes.length-1]+1;
        },
        getNodes(tree,nodelist){//获得选择的模板树节点id
            nodelist.push(tree.name);
            if(tree.children){
                for(let i=0;i<tree.children.length;i++){
                    this.getNodes(tree.children[i],nodelist);
                }
            }
            return nodelist;
        },
        getLinks(tree,linklist){//获得选择的模板树连线
            if(tree.children){
                for(let i=0;i<tree.children.length;i++){
                    linklist.push([tree.name,tree.children[i].name])
                    this.getLinks(tree.children[i],linklist);
                }
            }
            return linklist;
        },
        becomeId(nodes,links){
            let dic={};
            for(let i=0;i<nodes.length;i++){
                dic[nodes[i]]=i;
                nodes[i]=i;
            }
            for(let i=0;i<links.length;i++){
                links[i][0]=dic[links[i][0]];
                links[i][1]=dic[links[i][1]];
            }
            return {'links':links,'nodes':nodes};
        }
    },
    watch:{
        getTree:function(){
            this.ModelTreeClick(this.getTree,this.getTree.name);
            if(this.isFirst){
                this.searchClick();
                this.isFirst=false;
            }
            
        }
    }
}
</script>

<style scoped>
.container{
    width:20%;
    height:100%;
    box-sizing: border-box;
    border-right:none;
    float:left;
}
.Info{
    width:100%;
    height:18%;
    box-sizing: border-box;
    padding:5px 5px;
}

.allTrees{
    width:100%;
    height:32%;
    box-sizing: border-box;
    padding:5px 5px;
}

.modelBox{
    width:100%;
    height:50%;
    box-sizing: border-box;
    padding:5px 5px;
}

.filterBox{
    box-sizing: border-box;
    width:100%;
    height:100%;
    padding:5px 10px;
}
.filterBtn{
    width:50px;
    height:30px;
    border:1.5px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    margin-top:20px;
}
.translateBtn{
    width:50px;
    height:30px;
    border:1.5px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    margin-top:20px;
}
.content{
    width:100%;
}

.allModels ul{
    
    list-style: none;
}
.model{
    height:100%;
    /* border-right:1px solid #ccc; */
    box-sizing: border-box;
    float:left;
}
.btnBox{
    border:1px solid #ccc;
    padding:5px 5px;
    box-sizing: border-box;
    margin:5px 5px;
}
.btnBox .btnGroup{
    width:auto;
    height:100%;
    border:1px solid #3072ad;
    background-color: white;
    padding:2px 5px;
    border-radius:4px;
    margin-right:5px;
    cursor: pointer;
}
.btnBox .ReDo{
    width:40px;
    background-image: url('../assets/redo.png');
    background-position: center center;
    
}
.btnBox .UnDo{
    width:40px;
    background-image: url('../assets/undo.png');
    background-position: center center;
}
.btnBox .Node{
    width:40px;
    background-image: url('../assets/node.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 60%;
}
.btnBox .Line{
    width:40px;
    background-image: url('../assets/line.png');
    background-position: center center;
}
.btnBox .Search{
    width:40px;
    background-image: url('../assets/search.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80%;
}
.sliderBox{
    width:100%;
    height:20%;
}
.parameterName{
    width:30%;
    float:left;
    text-indent:10px;
    line-height: 200%;
}
.sliderStyle{
    width:65%;
    float:left;
    box-sizing:border-box;
    margin:0 5px;
}
.btns{
    width:auto;
    height:28px;
    background:white;
    border:1px solid #ccc;
    border-radius: 4px;
    line-height: 25px;
    padding:3px 5px;
    position:relative;
    bottom:5px;
    left:10px;
}

</style>
<style>
.el-slider__input {
    float: right;
    margin-top: 3px;
    width: 80px !important;
}
.el-slider__runway {
    margin-right: 100px !important;
    width: auto;
}
</style>